{extend name="layout/layout" /}

{block name="header"}
	<header class="mui-bar mui-bar-nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">{$title?$title:'商城'}</h1>
	</header>
{/block}

{block name="style"}
	<style>

		.mui-card{
			margin: 10px 0;
		}
		.mui-card-footer .mui-btn{
			font-size: 12px;
			padding: 4px 8px;
		}

		.total{
			padding: 5px 15px;
			min-height: 30px;
			font-size: 12px;
		}
		.mui-media-body{
			font-size: 12px;
		}
	</style>
{/block}

{block name="main"}
	<div class="order" id="order" v-cloak>

		<div class="box">
			<div>
				
				<div class="search">
					
				</div>

				<div class="list">

					<div v-if="list.length == 0">
						<p></p>
						<p class="mui-text-center">你没有相关订单</p>
					</div>
					<div class="mui-card item" v-else  v-for="item, index in list">
						<!--页眉，放置标题-->
						<div class="mui-card-header">
							<div class="mui-col-xs-12">
								<div class="business_name mui-pull-left">{{item.business_name}}</div>
								<div class="order-status mui-pull-right mui-text-right text-theme">{{item.order_status_text}}</div>
							</div>
						</div>
						<!--内容区-->
						<div class="mui-card-content" @tap="detail(item)">
							<ul class="mui-table-view">

							    <li class="mui-table-view-cell mui-media" v-for="goods, goods_index in item.products">
							        <a href="javascript:;">
							            <img class="mui-media-object mui-pull-left" :src="goods.original_image">
							            <div class="mui-media-body">
							                {{goods.goods_name}}
							                <p class='mui-ellipsis'>{{goods.spec_name}}</p>
							                <p class='mui-ellipsis'>
							                	<span class="text-theme">￥{{goods.price}} 积分可抵扣{{goods.point}} 元</span>
							                	<span class="mui-pull-right">x {{goods.number}}</span>
							                </p>
							            </div>
							        </a>
							    </li>
							</ul>
						</div>
						<!--页脚，放置补充信息或支持的操作-->
						<div class="mui-card-footer total">
							<div class="mui-col-xs-12 mui-text-right">
								合计: ￥ {{item.order_amount}} + {{item.integral_money}}积分 <small>(含运费￥{{item.freight}})</small>
							</div>
						</div>
						<div class="mui-card-footer">
							<div class="mui-col-xs-12 mui-text-right">
								<!-- 订单已关闭 -->
								<div v-if="item.order_status == 0">
									<a href="javascript:;" @tap.prevent="del(item, index)" class="mui-btn mui-btn-default mui-btn-outlined">删除订单</a>
								</div>
								<!-- 等待买家付款 -->
								<div v-if="item.order_status == 1">
									<a href="" class="mui-btn mui-btn-default mui-btn-outlined" @tap.prevent="cancel(item, index)">取消订单</a>
									<a :href="'/mobile/order/payorder/type/order/id/'+item.id" class="mui-btn mui-btn-theme mui-btn-outlined">付款</a>
								</div>
								<!-- 等待卖家发货 -->
								<div v-if="item.order_status == 2">
									<a href="" class="mui-btn mui-btn-default mui-btn-outlined" @tap.prevent="remind(item)">提醒发货</a>
								</div>
								<!-- 卖家已发货 -->
								<div v-if="item.order_status == 3">
									<a href="" class="mui-btn mui-btn-default mui-btn-outlined" @tap.prevent="shipping(item)">查看物流</a>
									<a href="" class="mui-btn mui-btn-theme mui-btn-outlined" @tap.prevent="signOrder(item)">确认收货</a>
								</div>
								
								<!-- 订单完成 -->
								<div v-if="item.order_status == 4">
									<a href="" class="mui-btn mui-btn-default mui-btn-outlined" @tap.prevent="shipping(item)">查看物流</a>
									<a href="" class="mui-btn mui-btn-default mui-btn-outlined" @tap.prevent="del(item, index)">删除订单</a>
									<a href="" class="mui-btn mui-btn-theme mui-btn-outlined" @tap.prevent="comment(item)" v-if="item.comment_status == 0">评价</a>
								</div>
							</div>
						</div>


					</div>


				</div>

			</div>
		</div>
	</div>
{/block}

{block name="navbar"}{/block}

{block name="script"}
	<script>
		mui.init({
		  pullRefresh : {
		    container:"#order",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
		    down : {
		      style:'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
		      color:'#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
		      height:'50px',//可选,默认50px.下拉刷新控件的高度,
		      range:'100px', //可选 默认100px,控件可下拉拖拽的范围
		      offset:'0px', //可选 默认0px,下拉刷新控件的起始位置
		      auto: false,//可选,默认false.首次加载自动上拉刷新一次
		      callback :function(){
		      	console.log('down');
		      	detailVue.list = [];
		      	detailVue.page = 1;
		      	detailVue.nextPage = false;
		      	// mui('#pullup-container').pullRefresh().refresh(true);

		      	detailVue.getGoods();
		      	// mui('.group-goods').pullRefresh().endPulldown();
		      } //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
		    },
		    up : {
		      height:50,//可选.默认50.触发上拉加载拖动距离
		      auto:true,//可选,默认false.自动上拉加载一次
		      contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
		      contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
		      callback :function(){
		      	detailVue.getList();
		      	this.endPullupToRefresh(detailVue.nextPage);
		      } //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
		    }
		  }
		});

		var detailVue = new Vue({
			el: '.order',
			data: {
				status:"{$data.status?:''}",
				list: [],
				page: 1,
				nextPage: false
			},
			mounted: function(){
				// this.getList();
			},
			methods:{
				//获取订单列表
				getList: function(){
					layer.open({
						type:2,
						shadeClose: false
					});

					var that = this;
					var url =  'order/index';
					request(that, {'url': url, 'data': {
						'status': that.status,
						'page': that.page
					}}, function(res){
						if(res.code == 200) {
							layer.closeAll();
							that.list = that.list.concat(res.data);
							that.page++;
							if(res.data.length < 20) {
								that.nextPage = true;
							}
						} else {
							mui.toast(res.msg);
						}	
					});
				},
				//删除订单
				del: function(item, index){
					var that = this;
					mui.confirm('确认删除该订单吗？', '提示', ['取消', '确认'], function(e) {
	                    if (e.index == 1) {
							var url =  'order/delOrder';
							layer.open({
								type:2,
								shadeClose: false,
							});
							request(that, {'url': url, 'data': {
							  	"id": item.id,
							}}, function(res){
								layer.closeAll();
								if(res.code == 200) {
									that.list.splice(index,1);
								}	
								mui.toast(res.msg);
							});
						}
					});
				},
				//取消订单
				cancel: function(item, index){
					var that = this;
					mui.confirm('确认取消该订单吗？', '提示', ['取消', '确认'], function(e) {
	                    if (e.index == 1) {
							var url =  'order/cancelOrder';
							layer.open({
								type:2,
								shadeClose: false,
							});
							request(that, {'url': url, 'data': {
							  	"id": item.id,
							}}, function(res){
								layer.closeAll();
								mui.toast(res.msg);
								
								if(res.code == 200) {
									that.getList();
								}
							});
							
						}
					});
				},
				//提醒发货
				remind: function(item){
					var that = this;
					var url =  'order/orderRemind';
					request(that, {'url': url, 'data': {
					  	"order_id": item.id,
					}}, function(res){
						mui.toast(res.msg);
					});
				},
				//查看物流
				shipping: function(item){
					location.href = '/mobile/order/shipping?code='+item.shipping_code+'&no='+item.shipping_no+'&name='+item.shipping_name;
				},
				//确认收货
				signOrder: function(item){
	  				var that = this;
					mui.confirm('确认收货吗？', '提示', ['取消', '确认'], function(e) {
	                    if (e.index == 1) {
							var url =  'order/signOrder';
							layer.open({
								type:2,
								shadeClose: false,
							});
							request(that, {'url': url, 'data': {
							  	"order_id": item.id,
							}}, function(res){
								layer.closeAll();
								mui.toast(res.msg);
								
								if(res.code == 200) {
									that.getList();
								}
							});
	                    }
	                })
				},
				//评价订单
				comment: function(item) {
					location.href = '/mobile/order/comment?order_id='+item.id;
				},
				//订单详情
				detail: function(item) {
					location.href = '/mobile/order/detail?order_id='+item.id;
				}
			}
		});
	</script>
{/block}